<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.js"></script>
		<style type="text/css">
			table {
				width: 98%;
				border: 1px orange solid;
				border-collapse: collapse;
				margin: auto;
			}

			table th,
			td {
				border: 1px orange solid;
				padding: 10px;
			}

			a {
				text-decoration: none;
			}
		</style>
	</head>
	<!-- atl + 鼠标 -->
	<body>
		<table>
			<tr>
				<th>全选 <input type="checkbox" id="all" /></th>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>奔驰</td>
				<td>￥1000.00</td>
				<td class="num"><a href="#" class="dec">-</a><input type="text" value="1" class="pnum"><a href="#"
						class="inc">+</a>
				</td>
				<td class="sum">￥1000.00</td>
				<td><a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>宝马</td>
				<td>￥1000.00</td>
				<td class="num"><a href="#" class="dec">-</a><input type="text" value="1" class="pnum"><a href="#"
						class="inc">+</a>
				</td>
				<td class="sum">￥1000.00</td>
				<td><a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td colspan="3" class="totalNum">已选0件商品</td>
				<td colspan="3" class="totalPrice">总价￥1000.00</td>
			</tr>
		</table>
		<script type="text/javascript">
			function total() {
				let totalNum = 0;
				let totalPrice = 0;
				$('.check:checked').each(function() {
					//总购买数量
					let num = $(this).parent().siblings('.num').children('input').val();
					totalNum += parseInt(num);
					//总购买金额
					let sum = $(this).parent().siblings('.sum').html().substring(1);
					totalPrice += parseInt(sum);
				})
				$('.totalNum').html("已选" + totalNum + "件商品");
				$('.totalPrice').html("总价" + totalPrice.toFixed(2));
			}
			//全选
			$('#all').click(function() {
				$('.check').prop('checked', $(this).prop('checked'));
				total();
			})

			//反选
			$('.check').click(function() {
				if ($('.check:checked').length == $('.check').length) {
					$('#all').prop('checked', true);
				} else {
					$('#all').prop('checked', false);
				}
				total();
			})


			//1.获取+对应的jquery对象, 2注册click事件
			$('.inc').click(function(e) {
				e.preventDefault();
				//++
				let val = $(this).prev().val();
				val++;
				$(this).prev().val(val);

				//单价
				let price = $(this).parent().prev().html();
				price = price.substring(1);
				//计算小计
				let sum = (price * $(this).prev().val()).toFixed(2);
				// Math.pow(price, $(this).prev().val())

				//赋值小计
				$(this).parent().next().html("￥" + sum);

				total();

			})

			$('.dec').click(function(e) { //e事件对象
				e.preventDefault(); //取消默认行为
				//-
				const input = $(this).next();
				let val = input.val();
				if (val > 1) val--;
				input.val(val);
				//单价
				const tdParent = $(this).parent();
				const tdParentPrev = tdParent.prev();
				let price = tdParentPrev.html();
				price = price.substring(1);
				//计算小计
				let sum = price * $(this).next().val();
				//赋值
				const tdParentNext = tdParent.next();
				tdParentNext.html("￥" + sum.toFixed(2));
				total();
			})

			$('.pnum').change(function() {
				let num = $(this).val();
				let price = $(this).parent().prev().html().substring(1);;
				$(this).parent().next().html("￥" + (price * num).toFixed(2));
				total();
			})

			//删除
			$('.del').click(function(e) {
				e.preventDefault();
				const tr = $(this).parents('tr');
				tr.remove();
				total();
			})
		</script>
	</body>
</html>
